<template>
  <view>
    <view class="public-content">
      <top-nav-bar />

      <view
        v-for="(item, index) in articleList"
        :key="index">
        <view class="public-title">
          {{ item.articleTitle }}
        </view>
        <view class="public-desc">{{ item.articleDescription }}</view>
        <view
          v-if="item.articleImg"
          style="width: 100%; border-radius: 30rpx; overflow: hidden; margin-bottom: 26rpx">
          <image
            :src="item.articleImg"
            lazy-load
            mode="widthFix"
            style="width: 100%; height: 100%">
          </image>
        </view>
        <view v-html="item.articleDetails"></view>
      </view>
    </view>
    <foot-page />
  </view>
</template>

<script setup>
  import { useArticle } from '@/hooks'

  const { articleList } = useArticle('Service_Introduction')
</script>

<style lang="scss">
  .public-title {
    margin: 20rpx 0 20rpx;
  }

  .public-desc {
    margin: 0;
    margin-bottom: 20rpx;
  }
</style>
